<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="../../js/react.js" charset="utf-8"></script>
    <script src="../../js/react-dom.js" charset="utf-8"></script>
    <script src="../../js/browser.min.js" charset="utf-8"></script>
    <script type="text/babel">
        /*function ActionLink() {
            function handleClick(e) {
                e.preventDefault()
                console.log('The link was clicked')
            }

            return (
                <a href="#" onClick={handleClick}>
                    Click me
                </a>
            )
        }*/

        class Toggle extends React.Component {
            constructor(props) {
                super(props)
                this.state = {isToggleOn: true}

                this.handleClick = this.handleClick.bind(this)
            }

            handleClick() {
                console.log(this);
                this.setState(prevState => ({
                    isToggleOn: !prevState.isToggleOn
                }))
            }

            render() {
                return (
                    <button onClick={this.handleClick}>
                        {this.state.isToggleOn ? 'ON' : 'OFF'}
                    </button>
                )
            }
        }

        ReactDOM.render(
            <Toggle />,
            document.getElementById('root')
        )
    </script>
</body>
</html>
